<script lang="ts" setup>

import { ref, reactive } from 'vue'

import type { TabsPaneContext } from 'element-plus'

const activeNameC = ref('one')

const input = ref('')
const isClick = ref(true)

const formInline = reactive({
  user: '',
  region: '第四自然水厂',
  date: '',
})

const now = new Date()
const defaultTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0);
const defaultTime2 = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59);

const value1 = ref('')
const value2 = ref('')

</script>

<template>

  <div class="first">

    <el-input v-model="input" disabled placeholder="查询条件"></el-input>
    <div class="detail">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="所属单位 :
              ">
          <el-select v-model="formInline.region" clearable>
            <el-option label="第四自然水厂" value="第四自然水厂" />
            <el-option label="消河" value="消河" />
            <el-option label="白马" value="白马" />
          </el-select>
        </el-form-item>

        <!-- 选择时间 -->
        <el-form-item label="开始时间 : ">
          <el-col :span="11">
            <el-date-picker v-model="value1" type="datetime" placeholder="年月日时分秒，默认当天00:00"
              :default-value="defaultTime" />
          </el-col>


        </el-form-item>
        <el-form-item label="结束时间 : ">
          <el-col :span="11">
            <el-date-picker v-model="value2" type="datetime" placeholder="年月日时分秒，默认当天23:59"
              :default-value="defaultTime2" />
          </el-col>


        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查看</el-button>
        </el-form-item>



      </el-form>
    </div>

    <el-tabs v-model="activeNameC" type="card" class="demo-tab">

      <el-tab-pane label="运行时长" name="one">
        <template #default>
          <div>
            <el-image v-if="isClick" @click="isClick = !isClick"
              src="https://img.axureshop.com/c9/57/1d/c9571de2aa7c47d2865ef6311a990b6a/images/%E6%B0%B4%E5%8E%82%E7%AE%A1%E7%90%86/u4431.png"
              :fit="fit" />
            <el-image v-else @click="isClick = !isClick"
              src="https://img.axureshop.com/c9/57/1d/c9571de2aa7c47d2865ef6311a990b6a/images/%E6%B0%B4%E5%8E%82%E7%AE%A1%E7%90%86/12_u4435.png"
              :fit="fit" />
          </div>
        </template>
      </el-tab-pane>
      <el-tab-pane label="故障分析" name="two">User</el-tab-pane>

    </el-tabs>

  </div>
</template>

<style lang="scss" scoped>
.first {
  .el-input {
    margin-bottom: 5px;
  }

  .detail {
    border: 2px solid #ebe8e8;
    border-radius: 4px 4px 0 0;
    padding: 10px 10px;

    .el-form {
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-evenly;
      align-content: center;

      .el-form-item {
        align-self: center;
        margin: 0;
        margin-bottom: 10px;
        margin-right: 20px;
      }

    }

  }

  .demo-tab {
    ::v-deep {


      .el-tabs__header {
        border-bottom: none;
        margin: 0;

        .el-tabs__nav {
          border: 2px solid #ebe8e8;
          border-top: none;
          border-radius: 0;
          background-color: #d7d7d7;

          .el-tabs__item:hover {
            color: #000;
            // height: 100%;
            // overflow: hidden;
            // line-height: 40px;

            background-color: #d7d7d7;
          }

          .is-active,
          .is-active:hover {
            color: #000;
            // height: 100%;
            // line-height: 41px;
            border-bottom: none;
            background-color: #fff;

          }
        }

      }

      .el-tabs__content {
        margin-top: 5px;
        padding: 0;
      }
    }
  }

  .demo-form-inline .el-input {
    --el-input-width: 220px;
  }

  .demo-form-inline .el-select {
    --el-select-width: 220px;
  }

}
</style>